<style lang="less">
    @import "cardUpload.less";
</style>
<template>
    <div class="over mt10">
        <div class="id_img_wp">
            <input type="file" accept="image/*" @change="getImg($event,'zm')" v-show="false" value="" ref="img_z"/>
            <input type="file" accept="image/*" @change="getImg($event,'fm')" value="" ref="img_f" v-show="false"/>
            <div style="overflow: hidden;">
                <div class="img_wp" @click="zhengmian">
                    <img :src="imgzurl" id="zmz" v-if="imgzurl"/>
                    <img v-else src="../../../assets/images/zhengmian@2x.png"/>
                    <p class="img_intro">身份证人像面</p>
                </div>
                <div class="img_wp" @click="fanmian">
                    <img :src="imgfurl" id="fmz" v-if="imgfurl"/>
                    <img v-else src="../../../assets/images/fanmian@2x.png"/>
                    <p class="img_intro">身份证国徽面</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        uploadFile,
        uploadRealFile,
        getBaseByMD5,
        getOCRInfo
    } from "_p/afs-apply/api/apply-contract/contract/entry/contract-img-upload";
    import {getUri} from "@/libs/tools";

    export default {
        name: "upload",
        data() {
            return {
                imgfurl: "",
                imgzurl: "",
                finalimgList: [],
            }
        },
        props: {
            frontType: {
                type: String
            },
            balckType: {
                type: String
            },
            isPass: {
                type: Boolean
            },
            isDeatils: {
                type: Boolean
            }
        },
        methods: {
            getImg(event, type) {
                let files = event.target.files;
                console.log(files, "files")
                let AllUpExt = ".jpg|.bmp|.jpeg|.png|.gif|";
                let extName = files[0].name.substring(files[0].name.lastIndexOf(".")).toLowerCase();
                if (AllUpExt.indexOf(extName + "|") == "-1") {
                    this.$Message.warning("文件格式不正确！");
                    return;
                }

                let size = files[0].size;
                size = size / (1024 * 1024);
                console.log(size)
                if (size > 10) {  // 10M
                    this.$Message.warning("文件过大");
                    return;
                }

                let file = files[0];
                let formData = new FormData();//创建 formdata对象
                formData.append('file', file);
                uploadFile(formData).then(res => {
                    if (res.code === "0000") {
                        this.uploadFiles(res.data, type)
                    } else {
                        this.$Message.error("图片转md5失败");
                    }
                });

            },
            uploadFiles(data, type) {
                let typeimg = type == 'zm' ? this.frontType : this.balckType
                let params = {
                    "map": data,
                    // "type": typeimg,
                    // "busiNo": this.tempBusiNo
                }
                uploadRealFile(params).then(res => {
                    if (res.code === "0000") {
                        console.log(data, "data")
                        this.getOCRInfo(data, type)
                        this.$Message.success("图片上传成功");
                        // let  _URL = window.URL || window.webkitURL;
                        // let tempUrl=_URL.createObjectURL(file)
                        let obj = {
                            map: data,
                        };
                        if (this.finalimgList.length > 0) {
                            this.finalimgList.forEach((item, index) => {
                                if (typeimg == item.map.type) {
                                    this.finalimgList[index].map = data;
                                    this.finalimgList[index].map.type = typeimg;
                                } else {
                                    if (this.finalimgList.length != 2) {
                                        obj.map.type = typeimg;
                                        this.finalimgList.push(obj);
                                    }
                                }
                            })
                        } else {
                            obj.map.type = typeimg;
                            this.finalimgList.push(obj);
                        }
                        console.log(this.finalimgList, "finalimgList")
                        if (type == "zm") {
                            this.imgzurl = "data:image/jpeg;base64," + res.data;
                            this.$refs.img_z.value = "";
                        } else if (type == "fm") {
                            this.imgfurl = "data:image/jpeg;base64," + res.data;
                            this.$refs.img_f.value = "";
                        }
                    } else {
                        this.$Message.error("图片上传失败");
                    }
                });
            },
            zhengmian() {
                if (this.isPass) {
                    return false;
                } else if (this.isDeatils == true) {
                    return false;
                }
                this.$refs.img_z.click();
            },
            fanmian() {
                if (this.isPass) {
                    return false;
                } else if (this.isDeatils == true) {
                    return false;
                }
                this.$refs.img_f.click();
            },
            showCarImg(val) {
                let params = {
                    "front": this.frontType,
                    "black": this.balckType,
                    "busiNo": val,
                }
                getBaseByMD5(params).then(res => {
                    if (res.code === "0000") {
                        if (Object.keys(res.data).length > 0) {
                            let tempArr = [];
                            if (res.data.front != "undefined") {
                                if (res.data.front.length > 0) {
                                    let frontObj = {
                                        map: {
                                            fileName: res.data.front[0].fileName,
                                            isFastDFS: "0",
                                            md5: res.data.front[0].fileId,
                                            size: "",
                                            suffix: res.data.front[0].fileType,
                                            type: this.frontType,
                                        }
                                    };
                                    this.imgzurl = `${_AFS_PROJECT_CONFIG.apiUri}/${getUri('image')}/upload/getBlob/${res.data.front[0].fileType}/${res.data.front[0].fileId}`;
                                    tempArr.push(frontObj);
                                }
                            }
                            if (typeof res.data.black != "undefined") {
                                if (res.data.black.length > 0) {
                                    let backObj = {
                                        map: {
                                            fileName: res.data.black[0].fileName,
                                            isFastDFS: 0,
                                            md5: res.data.black[0].fileId,
                                            size: "",
                                            suffix: res.data.black[0].fileType,
                                            type: this.balckType,
                                        }
                                    };
                                    this.imgfurl = `${_AFS_PROJECT_CONFIG.apiUri}/${getUri('image')}/upload/getBlob/${res.data.black[0].fileType}/${res.data.black[0].fileId}`;
                                    tempArr.push(backObj);
                                }

                            }
                            this.finalimgList = tempArr;
                        }
                    } else {
                        this.$Message.error("图片获取失败");
                    }
                });
            },
            // OCR识别
            getOCRInfo(data, type) {
                // 下面这个 params 是示例  正式调用的时候传递过来的格式，请注释
                let fileCode = type == 'zm' ? 'idCardFront' : 'idCardBack';
                let params = {
                    "caseCode": data.md5, // 这个传递md5的值
                    "inletEnd": "PC", // 这个可以写死PC
                    "sysCode": "ACS",  // 这个也可以写死ACS
                    "fileCode": fileCode, // 这个是身份证正面：idCardFront   身份证反面：idCardBack
                    "fileMd5": data.md5,  // 这个传递md5的值
                    "ispCode": "baidu" // 这个可以写死 baidu
                }
                getOCRInfo(params).then(res => {
                    if (res.code === "0000") {
                        if (type == 'zm') {
                            this.$emit('queryZmInfo', res.data)
                        } else if (type == 'fm') {
                            this.$emit('queryFmInfo', res.data)
                        }
                        // 调用成功后请去父类接收，然后赋值页面
                    } else {
                        this.$Message.error("OCR识别失败！");
                    }
                });
            },
            devierimglist() {
                return this.finalimgList;
            },
            resetimgurl() {
                this.imgzurl = "";
                this.imgfurl = "";
            }

        }
    }
</script>
